<template>
  <div class="mapContent">
    <el-container>
      <el-header>
        <h2>作业范围分配</h2>
        <el-button type="primary">编辑</el-button>
      </el-header>

      <el-main>
        <div class="search">
          <div class="word">地区关键词：</div>
          <el-input v-model="search" placeholder="请输入地方关键词" />
        </div>

        <!-- 地图 -->
        <div id="container" />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { getScope } from '@/api/website'

export default {
  data() {
    return {
      search: '',
      map: null,
      mapData: {}
    }
  },

  mounted() {
  // DOM初始化完成进行地图初始化
    this.initMap()
  },

  created() {
    this.getScopeMsg()
  },

  methods: {
    // 高德地图
    initMap() {
      AMapLoader.load({
        key: 'e0199c9ae5c7cb77cbc481f08c29293b', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AutoComplete', ''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // const longitude = this.mapData.longitude
        // const latitude = this.mapData.latitude
        this.map = new AMap.Map('container', { // 设置地图容器id
          viewMode: '2D', // 是否为3D地图模式
          zoom: 10, // 初始化地图级别
          center: [116.397428, 39.90923] // 初始化地图中心点位置
        })

        AMap.plugin(['AMap.PlaceSearch', 'AMap.Driving'], function() { // 异步同时加载多个插件
          var PlaceSearch = new AMap.PlaceSearch()
          this.map.addControl(PlaceSearch)
          var driving = new AMap.Driving()// 驾车路线规划
          driving.search(/* 参数*/)
        })
      }).catch(e => {
        console.log(e)
      })
    },

    // 获取业务范围
    async getScopeMsg() {
      const result = await getScope({ id: this.$route.params.id, type: 2 })
      this.mapData = result.data.data

      console.log(result)
    }
  }
}
</script>

<style scope>
.mapContent {
  padding: 20px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8faff;
}

main {
  background-color: #fff;
}

.search {
  display: flex;
  align-items: center;
  padding: 20px 0 70px;
}

.word {
  width: 80px;
}

input {
  display: inline-block;
  width: 230px !important;
  height: 40px;
}

/* 地图容器样式 */
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>
